<form [formGroup]="form" (ngSubmit)="onSubmit()" class="w-full flex-col p-0.5">
    <!--社区ID-->
    <input type="hidden" formControlName="sheQuID">

    <div class="form-row">
        <!--社区名称-->
        <label for="mingcheng">社区名称:</label>
        <input type="text" name="mingcheng" formControlName="mingCheng" required
            class="h-full text-input" />
        @if(form.controls.mingCheng.hasError('alreadyExists')) {
        <label class="invalid-input-message">社区名称已存在</label>
        }@else if(form.controls.mingCheng.hasError('required') && form.controls.mingCheng.touched){
        <label class="invalid-input-message">社区名称为必填项</label>
        }
    </div>

    <div class="form-row">
        <!--社区电话-->
        <label for="dianhua">社区电话:</label>
        <input type="tel" name="dianhua" formControlName="dianHua" />
    </div>

    <div class="form-row">
        <!--社区书记-->
        <label for="shequshuji">社区书记:</label>
        <input type="text" name="shequshuji" formControlName="shuJi" />
    </div>

    <div class="form-row">
        <!--书记电话-->
        <label for="shujidianhua">书记电话:</label>
        <input type="tel" name="shujidianhua" formControlName="shuJiDianHua" />
        @if(form.controls.shuJiDianHua.hasError('invalidPhoneNumber')) {
        <label class="invalid-input-message">无效的手机号</label>
        }
    </div>

    <div class="flex justify-center">
        <button class="btn btn-primary w-16 mr-1" type="submit">提交</button>
        <button class="btn btn-secondary w-16 ml-1" (click)="onCancel()">取消</button>
    </div>

</form>